/*
 * @Author: xiaosihan 
 * @Date: 2023-12-06 01:21:05 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-04-17 19:22:01
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import styles from "./leftMenu.module.less";

import MyPhoto from "./MyPhoto/MyPhoto";
import Sticker from "./Sticker/Sticker";
import Text from "./Text/Text";
import clsx from "clsx";
import designTemplateEditor from "../designTemplateEditorer";
import sticker_iconPNG from "./img/sticker_icon.png";
import text_iconPNG from "./img/text_icon.png";
import upload_iconPNG from "./img/upload_icon.png";


interface Iprops {
  children: ReactNode
}

// 左侧菜单
export default function LeftMenu() {

  const [tab, setTab] = useState(1);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {

  }), []);

  const menunList = [
    { name: "图库", tab: 1, icon: sticker_iconPNG },
    { name: "上传", tab: 3, icon: upload_iconPNG },
    { name: "文字", tab: 2, icon: text_iconPNG }
  ]

  return (
    <div className={styles.leftMenu} >
      <div className={styles.menu} >
        {
          menunList.map((menu, i) => {
            return (
              <div
                key={i}
                className={clsx(styles.menu_item, tab === menu.tab && styles.active)}
                onClick={() => setTab(menu.tab)}
              >
                <img
                  alt=""
                  src={menu.icon}
                  className={styles.icon}
                />
                {menu.name}
              </div>
            );
          })
        }
      </div>

      <div className={styles.menu_container} >
        {tab === 1 && <Sticker onClick={(url, name) => designTemplateEditor.addImg(url, name)} />}
        {tab === 2 && <Text onClick={(text, option) => designTemplateEditor.addText(text, option)} />}
        {tab === 3 && <MyPhoto onClick={(url, name) => designTemplateEditor.addImg(url, name)} />}
      </div>
    </div>
  );

}